<script lang="ts">
    import type { SelectOptionProps } from "./Select";

    const props: SelectOptionProps = $props();
    const classList = $derived({
        "cm-select-option": true,
        "cm-select-group-wrap": props.data.group,
        "cm-select-option-active": props.checked,
        "cm-select-option-disabled": props.data.disabled,
    });

    const value = props.data[props.valueField];

    const onClick = () => {
        if (props.disabled) {
            return;
        }
        props.onclick?.(value);
    };
</script>

{#if props.visible}
    <!-- svelte-ignore a11y_click_events_have_key_events -->
    <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
    <li class={classList} style={props.style} onclick={onClick}>
        {#if props.renderOption}
            {@render props.renderOption(props.data)}
        {:else}
            {props.data[props.textField]}
        {/if}
    </li>
{/if}
